<template>
  <inline-Modal
    :visible="visible"
    :title="title"
    :showOk="false"
    @cancel="handelCancel()"
  >
    <a-button
      type="primary"
      class="add-btn"
      :loading="loading"
      @click="handelOk()"
      v-if="!isView"
    >
      确定
    </a-button>
    <div class="uploadFilesPage-container">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :hideRequiredMark="isView"
      >
        <!-- 基本信息 -->
        <div class="base-info-container">
          <a-form-model-item label="项目名称">
            <a-select v-model="form.tenantCode" disabled>
              <a-select-option
                :value="item.proCode"
                v-for="item in projectSoucre"
                :key="item.uuid"
              >
                {{ item.proName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-row :gutter="0">
            <a-col :span="8">
              <a-form-model-item label="立项类型">
                <a-select v-model="form.type" disabled>
                  <a-select-option
                    :value="item.dicItemCode"
                    v-for="item in typeSource"
                    :key="item.dicItemCode"
                  >
                    {{ item.dicItemName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="项目类型">
                <a-select v-model="form.engType" disabled>
                  <a-select-option
                    :value="item.dicItemCode"
                    v-for="item in projectTypeSoucre"
                    :key="item.dicItemCode"
                  >
                    {{ item.dicItemName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="投资规模">
                <a-input v-model="form.investmentScale" disabled></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="0">
            <a-col :span="8">
              <a-form-model-item label="区位">
                <a-input v-model="form.workArea" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="建设单位">
                <a-input v-model="form.constructionUnit" disabled></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="负责人">
                <a-input v-model="form.responsiblePerson" disabled></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="0">
            <a-col :span="8">
              <a-form-model-item label="创建时间">
                <a-input v-model="form.createTime" disabled></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
        <a-divider />
        <!-- 指标项 -->
        <div
          class="card-info-container"
          v-for="(item, index) in form.list"
          :key="item.uuid"
        >
          <div class="sub-title">
            {{ item.name }}
          </div>
          <template v-if="item.remark == 'multi'">
            <div
              class="card-item"
              v-for="(first, firInx) in item.childList"
              :key="first.uuid"
            >
              <div class="header">{{ first.name }}</div>
              <div class="body">
                <a-row
                  :gutter="0"
                  v-for="(second, secIdx) in first.childList"
                  :key="second.uuid"
                >
                  <a-col :span="24">
                    <a-form-model-item :label="second.name">
                      <bjUploadFile
                        :viewMode="true"
                        :count="1"
                        v-model="second.files"
                        @preview="viewFile($event)"
                        @download="downloadFile($event)"
                        :replaceFields="{
                          fileName: 'fileName',
                          fileSize: 'fileSize',
                          fileType: 'fileType',
                        }"
                      ></bjUploadFile>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item
                      label="验收报告"
                      :prop="
                        'list.' +
                          index +
                          '.childList.' +
                          firInx +
                          '.childList.' +
                          secIdx +
                          '.acceptanceReport'
                      "
                      :rules="{
                        required: true,
                        message: '请选择文件',
                      }"
                    >
                      <bjUploadFile
                        :viewMode="isView"
                        :count="1"
                        v-model="second.acceptanceReport"
                        @change="
                          upLoadFileChange($event, {
                            level: 2,
                            idx: index,
                            first: firInx,
                            second: secIdx,
                            attrName: 'acceptanceReport',
                          })
                        "
                        @preview="viewFile($event)"
                        @download="downloadFile($event)"
                        :replaceFields="{
                          fileName: 'fileName',
                          fileSize: 'fileSize',
                          fileType: 'fileType',
                        }"
                      ></bjUploadFile>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </div>
          </template>
          <template v-if="item.remark != 'multi'">
            <a-row
              :gutter="0"
              v-for="(first, firInx) in item.childList"
              :key="first.uuid"
              class="first-container"
            >
              <a-col :span="24">
                <a-form-model-item :label="first.name">
                  <bjUploadFile
                    :viewMode="true"
                    :count="1"
                    v-model="first.files"
                    @preview="viewFile($event)"
                    @download="downloadFile($event)"
                    :replaceFields="{
                      fileName: 'fileName',
                      fileSize: 'fileSize',
                      fileType: 'fileType',
                    }"
                  ></bjUploadFile>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="验收报告"
                  :prop="
                    'list.' +
                      index +
                      '.childList.' +
                      firInx +
                      '.acceptanceReport'
                  "
                  :rules="{
                    required: true,
                    message: '请选择文件',
                  }"
                >
                  <bjUploadFile
                    :viewMode="isView"
                    :count="1"
                    v-model="first.acceptanceReport"
                    @change="
                      upLoadFileChange($event, {
                        level: 1,
                        idx: index,
                        first: firInx,
                        attrName: 'acceptanceReport',
                      })
                    "
                    @preview="viewFile($event)"
                    @download="downloadFile($event)"
                    :replaceFields="{
                      fileName: 'fileName',
                      fileSize: 'fileSize',
                      fileType: 'fileType',
                    }"
                  ></bjUploadFile>
                </a-form-model-item>
              </a-col>
            </a-row>
          </template>
          <a-divider />
        </div>
        <!-- 各类附件 -->
        <div class="base-info-container">
          <a-form-model-item
            label="职业卫生"
            prop="occupationalHealth"
            :rules="{
              required: form.security.length != 0 ? true : false,
              message: '请选择文件',
            }"
          >
            <bjUploadFile
              :viewMode="isView"
              :count="6"
              v-model="form.occupationalHealth"
              @change="
                upLoadFileChange($event, {
                  level: 3,
                  attrName: 'occupationalHealth',
                })
              "
              @preview="viewFile($event)"
              @download="downloadFile($event)"
              :replaceFields="{
                fileName: 'fileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
              }"
            ></bjUploadFile>
          </a-form-model-item>
          <a-form-model-item
            label="消防"
            prop="fireProtection"
            :rules="{
              required: form.security.length != 0 ? true : false,
              message: '请选择文件',
            }"
          >
            <bjUploadFile
              :viewMode="isView"
              :count="6"
              v-model="form.fireProtection"
              @change="
                upLoadFileChange($event, {
                  level: 3,
                  attrName: 'fireProtection',
                })
              "
              @preview="viewFile($event)"
              @download="downloadFile($event)"
              :replaceFields="{
                fileName: 'fileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
              }"
            ></bjUploadFile>
          </a-form-model-item>
          <a-form-model-item label="安全">
            <bjUploadFile
              :viewMode="isView"
              :count="6"
              v-model="form.security"
              @change="
                upLoadFileChange($event, { level: 3, attrName: 'security' })
              "
              @preview="viewFile($event)"
              @download="downloadFile($event)"
              :replaceFields="{
                fileName: 'fileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
              }"
            ></bjUploadFile>
          </a-form-model-item>
          <a-form-model-item
            label="财务审计"
            prop="financialAudit"
            :rules="{
              required: form.archives.length != 0 ? true : false,
              message: '请选择文件',
            }"
          >
            <bjUploadFile
              :viewMode="isView"
              :count="6"
              v-model="form.financialAudit"
              @change="
                upLoadFileChange($event, {
                  level: 3,
                  attrName: 'financialAudit',
                })
              "
              @preview="viewFile($event)"
              @download="downloadFile($event)"
              :replaceFields="{
                fileName: 'fileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
              }"
            ></bjUploadFile>
          </a-form-model-item>
          <a-form-model-item label="档案">
            <bjUploadFile
              :viewMode="isView"
              :count="6"
              v-model="form.archives"
              @change="
                upLoadFileChange($event, { level: 3, attrName: 'archives' })
              "
              @preview="viewFile($event)"
              @download="downloadFile($event)"
              :replaceFields="{
                fileName: 'fileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
              }"
            ></bjUploadFile>
          </a-form-model-item>
        </div>
        <!-- 报告集合 -->
        <a-row
          :gutter="0"
          class="spotCheck-container"
          v-for="(item, index) in form.reportList"
          :key="index"
        >
          <a-col :span="12">
            <a-form-model-item
              label="名称"
              :prop="'reportList.' + index + '.name'"
              :rules="{
                required: true,
                message: '请输入名称',
              }"
            >
              <a-input
                placeholder="请输入"
                v-model="item.name"
                :disabled="isView"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="报告"
              :prop="'reportList.' + index + '.files'"
              :rules="{
                required: true,
                message: '请选择文件',
              }"
            >
              <bjUploadFile
                :viewMode="isView"
                :count="1"
                v-model="item.files"
                @download="downloadFile($event)"
                @change="
                  upLoadFileChange($event, {
                    level: 4,
                    attrName: 'reportList',
                    idx: index,
                  })
                "
                @preview="viewFile($event)"
                :replaceFields="{
                  fileName: 'fileName',
                  fileSize: 'fileSize',
                  fileType: 'fileType',
                }"
              ></bjUploadFile>
            </a-form-model-item>
          </a-col>
          <div class="add-icon">
            <a-icon
              type="plus-circle"
              @click="addEntity()"
              v-if="index == form.reportList.length - 1 && !isView"
            />
            <a-icon
              type="delete"
              @click="deleteEntity(index)"
              v-if="index != form.reportList.length - 1 && !isView"
            />
          </div>
        </a-row>
      </a-form-model>
    </div>
    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </inline-Modal>
</template>

<script>
//附件上传
import { axios } from "@/utils/request";
import { mapGetters } from "vuex";
import { downloadDfs, getToken } from "@/utils/TopVUI";
import bjUploadFile from "@/components/extendCustom/bj-upload-file";
//预览
import previewModal from "@/pages/document/minio/previewModal";
import { getDicItemByCode, getAllProListByQX } from "@/api/common.js";
import {
  saveOrUpdateAcceptanceReport,
  detailHasData,
} from "@/api/safetyManage";
export default {
  name: "uploadFilesPage",
  components: {
    bjUploadFile,
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
    title: {
      type: String,
      default: "新增",
    },
    isView: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      //配置项
      configSoucre: [],
      //项目名称
      projectSoucre: [],
      //项目类型
      projectTypeSoucre: [],
      //立项类型
      typeSource: [],
      loading: false,
      form: {
        //项目名称
        tenantCode: undefined,
        //立项类型
        type: undefined,
        //项目类型
        engType: undefined,
        //投资规模
        investmentScale: "",
        //区位
        workArea: "",
        //建设单位
        constructionUnit: "",
        //负责人
        responsiblePerson: "",
        //创建时间
        createTime: "",
        //指标项
        list: [],
        //职业卫生
        occupationalHealth: [],
        //消防
        fireProtection: [],
        //安全
        security: [],
        //财务审计
        financialAudit: [],
        //档案
        archives: [],
        //报告集合
        reportList: [],
      },
      rules: {},
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //预览
    viewFile(file) {
      let { url } = file;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();

      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },
    //下载
    downloadFile(row) {
      let { url } = row;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    //选择附件
    upLoadFileChange({ file, index }, item) {
      let { level, idx, first, second, attrName } = item;
      let formData = new FormData();
      formData.append("bucket", "yx-cloud-vue");
      formData.append("file", file);
      switch (level) {
        //单级
        case 1:
          this.$set(
            this.form["list"][idx]["childList"][first][attrName][index],
            "loading",
            true
          );
          break;
        //多级
        case 2:
          this.$set(
            this.form["list"][idx]["childList"][first]["childList"][second][
              attrName
            ][index],
            "loading",
            true
          );
          break;
        //固定
        case 3:
          this.$set(this.form[attrName][index], "loading", true);
          break;
        //报告
        case 4:
          this.$set(this.form[attrName][idx]["files"][index], "loading", true);
          break;

        default:
          break;
      }
      axios
        .post(`/document/minio/uploadfile`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          let num = null;
          switch (level) {
            case 1:
              num =
                this.form["list"][idx]["childList"][first][attrName].length - 1;
              this.$set(
                this.form["list"][idx]["childList"][first][attrName][num],
                "url",
                res.url
              );
              this.$set(
                this.form["list"][idx]["childList"][first][attrName][num],
                "dfsFileUuid",
                res.dfsFileUuid
              );
              break;
            case 2:
              num =
                this.form["list"][idx]["childList"][first]["childList"][second][
                  attrName
                ].length - 1;
              this.$set(
                this.form["list"][idx]["childList"][first]["childList"][second][
                  attrName
                ][num],
                "url",
                res.url
              );
              this.$set(
                this.form["list"][idx]["childList"][first]["childList"][second][
                  attrName
                ][num],
                "dfsFileUuid",
                res.dfsFileUuid
              );
              break;
            //固定
            case 3:
              this.$set(this.form[attrName][index], "url", res.url);
              this.$set(
                this.form[attrName][index],
                "dfsFileUuid",
                res.dfsFileUuid
              );
              break;
            //报告
            case 4:
              this.$set(
                this.form[attrName][idx]["files"][index],
                "url",
                res.url
              );
              this.$set(
                this.form[attrName][idx]["files"][index],
                "dfsFileUuid",
                res.dfsFileUuid
              );
              break;
            default:
              break;
          }
        })
        .catch((_) => {
          switch (level) {
            case 1:
              this.$set(
                this.form["list"][idx]["childList"][first][attrName][index],
                "fail",
                true
              );
              break;
            case 2:
              this.$set(
                this.form["list"][idx]["childList"][first]["childList"][second][
                  attrName
                ][index],
                "fail",
                true
              );
              break;
            //固定
            case 3:
              this.$set(this.form[attrName][index], "fail", true);
              break;
            //报告
            case 4:
              this.$set(this.form[attrName][idx]["files"][index], "fail", true);
              break;
            default:
              break;
          }
        })
        .finally((_) => {
          switch (level) {
            case 1:
              this.$set(
                this.form["list"][idx]["childList"][first][attrName][index],
                "loading",
                false
              );
              break;
            case 2:
              this.$set(
                this.form["list"][idx]["childList"][first]["childList"][second][
                  attrName
                ][index],
                "loading",
                false
              );
              break;
            //固定
            case 3:
              this.$set(this.form[attrName][index], "loading", false);
              break;
            //报告
            case 4:
              this.$set(
                this.form[attrName][idx]["files"][index],
                "loading",
                false
              );
              break;
            default:
              break;
          }
        });
    },

    getDetail() {
      let { uuid } = this.parameter;
      return new Promise((resolve, reject) => {
        detailHasData({ uuid })
          .then((res) => {
            this.form = {
              //项目名称
              tenantCode: res.tenantCode,
              //立项类型
              type: res.type,
              //项目类型
              engType: res.engType,
              //投资规模
              investmentScale: res.investmentScale,
              //区位
              workArea: res.workArea,
              //建设单位
              constructionUnit: res.constructionUnit,
              //负责人
              responsiblePerson: res.responsiblePerson,
              //创建时间
              createTime: res.createTime,
              //指标项
              list: [],
              //职业卫生
              occupationalHealth: JSON.parse(res?.occupationalHealth ?? "[]"),
              //消防
              fireProtection: JSON.parse(res?.fireProtection ?? "[]"),
              //安全
              security: JSON.parse(res?.security ?? "[]"),
              //财务审计
              financialAudit: JSON.parse(res?.financialAudit ?? "[]"),
              //档案
              archives: JSON.parse(res?.archives ?? "[]"),
              //报告集合
              reportList: [],
            };
            //指标项
            (res?.childList ?? []).forEach((v) => {
              if (v.remark != "multi") {
                v.childList.forEach((item) => {
                  //附件
                  item.files = JSON.parse(item.files ?? "[]");
                  //验收报告
                  item.acceptanceReport = JSON.parse(
                    item?.acceptanceReport ?? "[]"
                  );
                });
              }
            });
            (res?.childList ?? []).forEach((v) => {
              if (v.remark == "multi") {
                v.childList.forEach((item) => {
                  item.childList.forEach((third) => {
                    //附件
                    third.files = JSON.parse(third.files ?? "[]");
                    //验收报告
                    third.acceptanceReport = JSON.parse(
                      third?.acceptanceReport ?? "[]"
                    );
                  });
                });
              }
            });
            this.form.list = res.childList;
            //报告集合
            (res?.fileList ?? []).forEach((v) => {
              this.form.reportList.push({
                uuid: v.uuid,
                name: v.name,
                files: JSON.parse(v?.files ?? "[]"),
              });
            });
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    getData() {
      Promise.all([
        this.getProjectData(),
        this.getTypeData(),
        this.getProjectType(),
        this.getDetail(),
      ]);
    },
    //查询所有项目
    getProjectData() {
      return new Promise((resolve, reject) => {
        getAllProListByQX()
          .then((res) => {
            this.projectSoucre = res?.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectSoucre = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询立项类型
    getTypeData() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "projectApprovalType" })
          .then((res) => {
            let { data } = res;
            this.typeSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.typeSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询项目类型
    getProjectType() {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "engineeringType" })
          .then((res) => {
            let { data } = res;
            this.projectTypeSoucre = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectTypeSoucre = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    handelOk() {
      this.filesSubmit();
    },
    //上传文件
    filesSubmit() {
      let { uuid } = this.parameter;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { form } = this;
          let formJson = {
            uuid,
            list: this.dealWithFiles(),
            //职业卫生
            occupationalHealth: JSON.stringify(form.occupationalHealth),
            //消防
            fireProtection: JSON.stringify(form.fireProtection),
            //安全
            security: JSON.stringify(form.security),
            //财务审计
            financialAudit: JSON.stringify(form.financialAudit),
            //档案
            archives: JSON.stringify(form.archives),
            //报告集合
            fileList: [],
          };
          form.reportList.forEach((v) => {
            formJson.fileList.push({
              uuid: v?.uuid ?? "",
              name: v.name,
              files: JSON.stringify(v.files),
            });
          });
          this.loading = true;
          saveOrUpdateAcceptanceReport(formJson)
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success("操作成功", 1.5);
                this.handelCancel();
              } else {
                this.$message.error(res?.message ?? "操作失败");
              }
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },

    dealWithFiles() {
      let { form } = this;
      let list = [];
      console.log(form.list, "form.list");
      form.list.forEach((item) => {
        if (item.remark != "multi") {
          item.childList.forEach((second) => {
            list.push({
              uuid: second.detailId,
              files: JSON.stringify(second.acceptanceReport),
            });
          });
        }
      });
      form.list.forEach((item) => {
        if (item.remark == "multi") {
          item.childList.forEach((second) => {
            second.childList.forEach((third) => {
              list.push({
                uuid: third.detailId,
                files: JSON.stringify(third.acceptanceReport),
              });
            });
          });
        }
      });
      return list;
    },

    handelCancel() {
      this.$parent.getTableData();
      this.$emit("update:visible", false);
    },

    //新增报告
    addEntity() {
      this.form.reportList.push({
        uuid: "",
        name: "",
        files: [],
      });
    },
    //删除报告
    deleteEntity(index) {
      this.form.reportList.splice(index, 1);
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.add-btn {
  position: absolute;
  top: 10px;
  right: 90px;
}
.uploadFilesPage-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/.ant-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
  }
  /deep/.bj-upload-file {
    .choosed-file-warp {
      width: 100%;
    }
  }
  /deep/.ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 120px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      overflow: hidden;
    }
  }
  /deep/.ant-divider-horizontal {
    margin: 10px 0;
  }
  .base-info-container {
    padding-right: 100px;
  }
  .card-info-container {
    .sub-title {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #111111;
      padding: 14px 0 14px 22px;
    }
    .card-item {
      margin: 0 100px 0 20px;
      border-radius: 6px 6px 6px 6px;
      box-shadow: 0px 0px 3px 2px rgba(51, 51, 51, 0.14);
      margin-bottom: 16px;
      &:last-of-type {
        margin-bottom: 16px;
      }
      .header {
        padding: 10px 24px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        border-bottom: 1px solid #d9d9d9;
      }
      .body {
        padding: 10px 20px;
        box-sizing: border-box;
      }
    }
    /deep/.ant-form-item {
      display: flex;
      .ant-form-item-label {
        flex-shrink: 0;
        width: 86px;
        white-space: pre-wrap;
        display: flex;
        justify-content: flex-end;
        line-height: 20px;
        align-items: center;
        margin-right: 8px;
      }
    }
  }
  .first-container {
    padding: 0 100px 0 20px;
  }

  .spotCheck-container {
    padding-right: 100px;
    padding-bottom: 20px;
    .add-icon {
      position: absolute;
      right: 52px;
      top: 10px;
      /deep/.anticon {
        cursor: pointer;
        font-size: 18px;
        &.anticon-delete {
          color: #ff2d2d;
        }
        &.anticon-plus-circle {
          color: #1677ff;
        }
      }
    }
  }
}
</style>
